<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>

    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">

<style>
    #blogArea img{
        width: 100%;
        overflow: hidden;
    }
    .my-gallery{
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #000;
        z-index: 180000;
    }

    .my-gallery-img{
        position: absolute;
        top: 10px;
        right: 0;
        bottom: 60px;
        left: 0;
        background: 50% no-repeat;
        background-size: contain;
    }

</style>
</head>
<body>
<jsp:include page="${APP_PATH}/common/head-blog.jsp"/>
<div class="row">
    <div class="d-none d-md-block d-lg-block d-xl-block col-md-3 col-lg-3 col-xl-3 ml-2">

        <div id="sideDiv" class="col-md-3 col-lg-3 col-xl-3" style="display: none;position:fixed;">
            <div class="m-1 p-2 mb-2 rounded shadow-sm bg-white">
                <div class="border-dark border-bottom pb-1 mb-1">
                    <strong>博主信息</strong>
                </div>
                <div class="border-dark border-bottom pb-1 pt-1">
                    <%--头像--%>
                    <div class="d-inline">
                        <img class="rounded-circle" src="${hashMap.author.headimgurl}" width="48px" height="48px"
                             alt="作者头像">
                    </div>
                    <%--用户名，是否关注--%>
                    <div class="d-inline">
                        <a class="text-dark" style="vertical-align: top;" href="${APP_PATH}/user/${hashMap.author.id}">${hashMap.author.nickname}</a><br/>
                        <div style="clear: both"></div>
                    </div>
                    <span>ID:<a class="font-weight-light">${hashMap.author.id}</a></span>
                </div>
                <div class="border-dark border-bottom pb-0 mb-0">
                    <div class="d-flex">
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>关注</dt>
                                <dd>${hashMap.author.followingusernum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>粉丝</dt>
                                <dd>${hashMap.author.fannum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>经验</dt>
                                <dd>${hashMap.author.jiyan}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="defaultSideDiv">
            <div class="my-1 p-2 mb-2 rounded shadow-sm bg-white">
                <div class="border-dark border-bottom pb-1 mb-1">
                    <strong>博主信息</strong>
                </div>
                <div class="border-dark border-bottom pb-1 pt-1">
                    <%--头像--%>
                    <div class="d-inline">
                        <img class="rounded-circle" src="${hashMap.author.headimgurl}" width="48px" height="48px"
                             alt="作者头像">
                    </div>
                    <%--用户名，是否关注--%>
                    <div class="d-inline">
                        <a id="btn-follow" style="display: none;font-size: xx-small" class="btn btn-sm btn-outline-success float-right">关注</a>
                        <a id="btn-cancel-follow" style="display: none;font-size: xx-small" class="btn btn-sm btn-outline-danger float-right">取消关注</a>
                        <a id="btn-edit-profile" href="/mine" style="display: none;font-size: xx-small" class="btn btn-sm btn-outline-info float-right">编辑</a>
                        <a class="text-dark" style="vertical-align: top;" href="${APP_PATH}/user/${hashMap.author.id}">${hashMap.author.nickname}</a><br/>
                        <div style="clear: both"></div>
                    </div>
                    <span id="authorArea" data-authorId="${hashMap.author.id}">ID:<a
                            class="font-weight-light">${hashMap.author.id}</a></span>
                </div>
                <div class="border-dark border-bottom pb-0 mb-0">
                    <div class="d-flex">
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>关注</dt>
                                <dd>${hashMap.author.followingusernum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>粉丝</dt>
                                <dd>${hashMap.author.fannum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>经验</dt>
                                <dd>${hashMap.author.jiyan}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="pb-1">
                    <p>${hashMap.author.slogan}</p>
                </div>
            </div>

            <%--==========================================================================================--%>
            <div class="my-1 p-2 mb-2 rounded shadow-sm bg-white">
                <div class="border-bottom border-dark">
                    <a class="font-weight-bold"><i class="fa fa-passport"></i> 最新文章</a>
                </div>
                <%--最新文章--%>
                <div>
                    <c:choose>
                        <c:when test="${not empty  hashMap.userLatestBlogList}">
                            <%--最新文章不为空--%>
                            <c:forEach items="${hashMap.userLatestBlogList}" var="blog">
                                <p class="mb-0">☞<a class="text-dark" href="/blog/${blog.id}">${blog.blogtitle}</a></p>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            <%--为空--%>
                            <span>该用户最近没有发表任何文章！</span>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>

            <%--==========================================================================================--%>

            <div class="my-1 p-2 mb-2 rounded shadow-sm bg-white">
                <%--热门文章--%>
                <div class="border-bottom border-dark">
                    <a class="font-weight-bold"><i class="fa fa-fire"></i> 热门文章</a>
                </div>
                <div>
                    <c:choose>
                        <c:when test="${not empty  hashMap.userHottestBlogList}">
                            <c:forEach items="${hashMap.userHottestBlogList}" var="blog">
                                <p class="mb-0">☞<a class="text-dark" href="/blog/${blog.id}">${blog.blogtitle}</a></p>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            <%--为空--%>
                            <span>该用户最近没有发表任何文章！</span>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
            <%--==========================================================================================--%>

            <div id="blogByTypeArea" class="my-1 p-2 mb-2 rounded shadow-sm bg-white" style="display: none;">
                <%--个人分类--%>
                <div class="border-bottom border-dark">
                    <a class="font-weight-bold"><i class="fa fa-bookmark"></i> 个人分类</a>
                </div>
                <div>
                    <c:choose>
                        <c:when test="${not empty  hashMap.authorBlogType}">
                            <%--最新文章不为空--%>
                            <c:forEach items="${hashMap.authorBlogType}" var="blogType">
                                <p class="mb-1"><a class="text-dark" href="/blog-byType">${blogType.blogtypename}</a><a class="float-right">【${blogType.blognum}】</a></p>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            <%--为空--%>
                            <span>该用户没有个人分类</span>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </div>


        <%--做锚点使用，监听页面滚动--%>
        <div id="anchor"></div>

        <%--==========================================================================================--%>

    </div>
    <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12">
        <%--博客浏览，评论，点赞，博客举报，收藏--%>
        <div id="blogArea" data-blogId="${hashMap.blog.id}" class="m-1 p-2 mb-2 rounded shadow-sm bg-white"
             style="position: relative">
            <div class="border-bottom border-dark">
                <%--博客标题--%>
                <h4 class="font-weight-bold">${hashMap.blog.blogtitle}</h4>
                <div class="text-left">
                    <%--编辑时间--%>
                    <span class="font-weight-light" style="font-size: smaller"><fn:formatDate
                            value="${hashMap.blog.edittime}" type="both"/></span>
                    <%--浏览次数--%>
                    <span class="ml-2 font-weight-light"
                          style="font-size: smaller">浏览次数：${hashMap.blog.readcount}</span>
                </div>
            </div>
            <%--博客内容--%>
            <div class="mt-2 pb-5 border-bottom border-dark">${hashMap.blog.blogcontent}</div>
            <%--底部信息栏--%>
            <div class="mt-2 pb-2" style="position: relative">
                <span id="upvotenum" data-num="${hashMap.blog.upvotenum}"><i
                        class="fa fa-arrow-circle-up text-success"></i>${hashMap.blog.upvotenum}</span>
                <span id="downvotenum" data-num="${hashMap.blog.downvotenum}" class="ml-2"><i
                        class="fa fa-arrow-circle-down text-danger"></i>${hashMap.blog.downvotenum}</span>
                <c:choose>
                    <c:when test="${hashMap.author.id==user.id}">
                        <%--作者和登录用户是同一个人--%>
                        <div style="position: absolute;bottom:5px;right:5px;">
                            <a href="/editBlog/${hashMap.blog.id}" class="btn btn-sm btn-success text-white"><i
                                    class="fa fa-edit"></i>编辑</a>
                            <a id="btn-delete" data-status="${hashMap.blog.blogstatus}"
                               class="btn btn-sm btn-danger text-white"><i class="fa fa-trash-alt"></i>删除</a>
                        </div>
                    </c:when>
                    <c:otherwise>

                        <div style="position: absolute;bottom:5px;right:5px;">
                            <a id="btn-upvote" class="btn btn-sm btn-success text-white"><i
                                    class="fa fa-arrow-up text-white"></i>支持</a>
                            <a id="btn-downvote" class="btn btn-sm btn-danger text-white"><i
                                    class="fa fa-arrow-down text-white"></i>反对</a>
                            <a id="btn-star" class="btn btn-sm btn-success text-white"><i
                                    class="fa fa-star text-white"></i>收藏</a>
                            <a id="btn-report" class="btn btn-sm btn-danger text-white"><i
                                    class="fa fa-arrow-alt-circle-right text-white"></i>举报</a>
                        </div>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
        <div class="m-1 mb-2 p-2 pt-0 rounded shadow-sm bg-white">
            <%--评论区--%>
            <div class="border-bottom border-dark pb-2">
                <div class="border-bottom border-gray">
                    <a href="#" class="float-right text-secondary" onclick="goTop()"><i class="fa fa-arrow-up"></i>回到顶部</a>
                    <a><strong>评论区</strong></a>
                </div>
                <div id="commentArea" data-userId="${user.id}" data-usernickname="${user.nickname}">

                </div>
                <div id="commentArea-pageNav">
                    <%--评论区分页按钮--%>

                </div>
            </div>
            <%--添加评论--%>
            <c:choose>
                <c:when test="${not empty user}">
                    <%--已登录--%>
                    <div class="border-bottom border-dark pb-2 mt-2">
                        <div class="border-bottom border-gray">
                                <%--评论头--%>
                            <a><strong>添加一条新回复</strong>
                                <small>请尽量让自己的回复能够对别人有帮助</small>
                            </a>
                        </div>
                        <div class="pt-2">
                                <%--评论框--%>
                            <form id="blogCommentForm">
                                <input type="hidden" name="fromuserid" value="${user.id}">
                                <input type="hidden" name="fromusername" value="${user.nickname}">
                                <input type="hidden" name="touserid" value="${hashMap.author.id}">
                                <input type="hidden" name="tousername" value="${hashMap.author.nickname}">
                                <input type="hidden" name="blogid" value="${hashMap.blog.id}">
                                <textarea class="form-control" rows="4" cols="10" name="comment"
                                          placeholder="@${hashMap.author.nickname}"
                                          maxlength="10240"></textarea>
                            </form>
                        </div>
                        <div class="pt-1">
                                <%--底部提示信息--%>
                            <a id="btn-comment" class="btn btn-sm btn-outline-danger">回复</a>
                        </div>
                    </div>
                </c:when>
                <c:otherwise>
                    <div class="bg-info mt-1 p-2">
                        <h4>您还没有登录，请<a href="${APP_PATH}/login">登录</a>后再进行评论！</h4>
                    </div>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
</div>


<%--图片预览层--%>
<div class="my-gallery" id="gallery">
    <span class="my-gallery-img" id="galleryImg"></span>
</div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>


<script>
    $("#blogArea img").click(function () {
        $("#galleryImg").attr("style", "background-image:url('"+$(this).attr("src")+"')");
        $("#gallery").fadeIn(100);
    });

    $("#gallery").click(function () {
        $("#gallery").fadeOut(100);
    });

    $(function () {

        //作者本人访问，显示博客分类侧边栏div
        //登录用户id
        var userId = $("#commentArea").attr("data-userId");
        //作者用户id
        var authorId = $("#authorArea").attr("data-authorId");
        if (userId === authorId) {
            $("#blogByTypeArea").show();
        }

        //页面滚动高度监听并作出响应
        //获取侧边栏最底部div的高度
        var anchorTop = document.getElementById("anchor").offsetTop;
        $(window).scroll(function() {
            //为了保证兼容性，这里取两个值，哪个有值取哪一个
            //scrollTop就是触发滚轮事件时滚轮的高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            //如果页面滑动到指定距离
            if (scrollTop > anchorTop) {

                $("#defaultSideDiv").hide();
                $("#sideDiv").show();
            }else{
                $("#sideDiv").hide();
                $("#defaultSideDiv").show();
            }
        });
    });


    //回到顶部
    function goTop() {
        scrollTo(0, 0);
    };

    //点击回复按钮
    $("#btn-comment").click(function () {
        //验证字段
        if ($("textarea[name=comment]").val().length > 5) {
            //开始提交表单
            $.ajax({
                url: '/addBlogComment',
                data: $("#blogCommentForm").serialize(),
                type: 'POST',
                success: function (result) {
                    if (result.code === 100) {
                        toastr.success("回复成功！");
                        //跳转到评论区首页
                        var blogId = $("#blogArea").attr("data-blogId");
                        toPage(blogId, 1);
                        //去掉textarea内容
                        $("textarea[name=comment]").val("");
                    } else {
                        toastr.error("回复失败，请稍后重试！");
                        return false;
                    }
                }
            });
        } else {
            toastr.info("回复内容不得少于6个字符！");
            return false;
        }

    });

    //点击评论区的回复按钮
    function reply(ele) {
        //判断用户是否登录，如果没有登录，提示用户登录
        var userId = $("#commentArea").attr("data-userId");
        var nickname = $("#commentArea").attr("data-usernickname");
        if (userId === "") {
            toastr.error("请登录后再回复！");
            return false;
        }
        if (userId != "" && nickname === "") {
            toastr.error("请先完善个人信息，再来回复！");
            return false;
        }

        //修改form表单数据
        var touserid = $(ele).attr("data-touserId");
        var tousername = $(ele).attr("data-tousername");

        $("input[name=fromuserid]").val(userId);
        $("input[name=fromusername]").val(nickname);
        $("input[name=touserid]").val(touserid);
        $("input[name=tousername]").val(tousername);
        //清除框内容，在框内加上@xxxx帮助提示
        $("textarea").innerHTML = "";
        $("textarea").attr("placeholder", "@" + tousername);
        //滚动页面到回复框
        $('html, body').animate({
            scrollTop: $("#blogCommentForm").offset().top
        }, 1000);
        //回复框获取焦点
        $("textarea").focus();
    }

    function buildPage(result) {
        var blogId = $("#blogArea").attr("data-blogId");
        //1.构建评论数据
        var $commentArea = $("#commentArea");
        $commentArea.empty();
        $.each(result.extend.pageInfo.list, function (index, item) {
            var $div_media = $("<div class='media text-muted pt-3' style='position:relative;'>");
            //锚点
            $div_media.append($("<a id='"+item.id+"'></a>"));
            var $a_img = $("<a href='/user/" + item.fromuserid + "'>").append($("<img src='" + item.fromuserheadimgurl + "' data-holder-rendered='true' width='40px' height='40px'>"));

            var $div_media_body = $("<div class='media-body ml-3 pb-3 mb-0 small lh-125 border-bottom border-gray'>");
            var $title = $("<div>").append($("<a class='text-dark' href='/user/" + item.fromuserid + "'><strong>" + item.fromusername + "</strong></a>")).append($("<small class='ml-2 d-inline-block text-gray-dark'>" + new Date(item.edittime).toLocaleString() + "</small>"));
            var $p_comment = $("<p>").append("<strong>@</strong>").append($("<a href='/user/" + item.touserid + "'>" + item.tousername + "</a>")).append(": " + item.comment);
            //底部按钮
            var $btn_reply = $("<button onclick='reply(this)' data-touserId='" + item.fromuserid + "' data-tousername='" + item.fromusername + "' class='btn btn-sm btn-outline-dark' style='position:absolute;bottom:5px;right:5px;'>回复</button>");
            $div_media.append($a_img).append($div_media_body.append($title).append($p_comment).append($btn_reply)).appendTo($commentArea);
        })
        //2.构建页码
        var $commentArea_pageNav = $("#commentArea-pageNav");
        $commentArea_pageNav.empty();

        var ul = $("<ul></ul>").addClass("pagination");

        //遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {

            var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
            if (result.extend.pageInfo.pageNum === item) {
                //当前页按钮，不可点击
                numLi.find("a").removeClass("btn-outline-primary");
                numLi.find("a").addClass("disabled");
                numLi.find("a").addClass("btn-primary");
            }
            numLi.click(function () {
                toPage(blogId, item);
            });
            ul.append(numLi);
        });
        var ulEle = $("<div class=mt-2>").append(ul);
        ulEle.appendTo($commentArea_pageNav);
    }

    //获取评论信息
    function toPage(blogId, pn) {
        $.ajax({
            url: "/getBlogComments/" + blogId + "/" + pn,
            method: 'GET',
            success: function (result) {
                if (result.code === 100) {
                    if (result.extend.pageInfo.list.length > 0) {
                        buildPage(result);
                    } else {
                        $("<p>").append("暂无任何评论,快来抢沙发！Σ(っ °Д °;)っ！！").appendTo($("#commentArea"));
                    }
                } else {
                    //获取信息失败
                    toastr.error("获取博客评论数据失败，请稍后重试！");
                }
            }
        });
    }

    //默认加载第1页的评论数据
    $(function () {
        var blogId = $("#blogArea").attr("data-blogId");
        toPage(blogId, 1);

        var userId = $("#commentArea").attr("data-userId");
        var authorId = $("#authorArea").attr("data-authorId");
        if (userId.length === 16) {
            //已登录
            if (userId === authorId) {
                $("#btn-edit-profile").show();
            }else{
                //查询是否已关注该用户
                $.ajax({
                    url: '/queryFollowUser/' + userId + "/" + authorId,
                    type: 'GET',
                    success: function (result) {
                        if (result.extend.flag === "true") {
                            //显示取消关注按钮
                            $("#btn-cancel-follow").show();
                        }
                        if (result.extend.flag === "false") {
                            //显示关注按钮
                            $("#btn-follow").show();
                        }
                    }
                });
            }
        }
    });

    //点击删除按钮
    $("#btn-delete").click(function () {
        var blogId = $("#blogArea").attr("data-blogId");
        //判断该博客状态，如果是回收站中的博客，永久删除，否则移入回收站
        var status = $("#btn-delete").attr("data-status");
        if (status == 2) {
            if (confirm("该博客为回收站中的博客，确认要永久删除吗？此操作不可逆，无法找回。")) {
                //调用删除
                $.ajax({
                    url: '/delBlog',
                    data: {id: blogId},
                    type: 'POST',
                    success: function (result) {
                        if (result.code === 100) {
                            //操作成功
                            window.location.href = "/blog-all";
                        } else {
                            toastr.error("删除失败，请稍后重试！");
                        }
                    }
                });
            }
        } else {
            if (confirm("确认删除该博客吗？你还可以在回收站中找到它！")) {
                //调用修改状态为2
                $.ajax({
                    url: '/recycleBlog',
                    data: {id: blogId},
                    type: 'POST',
                    success: function (result) {
                        if (result.code === 100) {
                            //操作成功
                            window.location.href = "/blog-all";
                        } else {
                            toastr.error("删除失败，请稍后重试！");
                        }
                    }
                });
            }
        }
    });

    function checkLogin() {
        //判断用户是否登录，如果没有登录，提示用户登录
        var userId = $("#commentArea").attr("data-userId");
        var nickname = $("#commentArea").attr("data-usernickname");
        if (userId === "") {
            //未登录
            toastr.error("请先登录！");
            return false;
        }
        if (userId != "" && nickname === "") {
            //已登录，未完善信息
            toastr.error("请先完善个人信息再进行操作！");
            return false;
        }
        return true;
    }

    //支持按钮
    $("#btn-upvote").click(function () {
        //判断用户是否登录
        if (checkLogin()) {
            var userId = $("#commentArea").attr("data-userId");
            var blogId = $("#blogArea").attr("data-blogId");
            if (userId.length == 16 && blogId.length == 16) {
                $.ajax({
                    url: '/upvoteBlog/' + userId + "/" + blogId,
                    type: 'GET',
                    success: function (result) {
                        if (result.code === 100) {
                            var num = new Number($("#upvotenum").attr("data-num")) + 1;

                            $("#upvotenum").empty();
                            $("#upvotenum").append($("<i class='fa fa-arrow-up text-success'></i>")).append(num);
                            toastr.success("操作成功！");
                        } else {
                            toastr.error(result.extend.error);
                        }
                    }
                });
            }
        }
    });

    //反对按钮
    $("#btn-downvote").click(function () {
        //判断用户是否登录
        if (checkLogin()) {
            var userId = $("#commentArea").attr("data-userId");
            var blogId = $("#blogArea").attr("data-blogId");
            if (userId.length == 16 && blogId.length == 16) {
                $.ajax({
                    url: '/downvoteBlog/' + userId + "/" + blogId,
                    type: 'GET',
                    success: function (result) {
                        if (result.code === 100) {
                            var num = new Number($("#downvotenum").attr("data-num")) + 1;
                            $("#downvotenum").empty();
                            $("#downvotenum").append($("<i class='fa fa-arrow-down text-danger'></i>")).append(num);
                            toastr.success("操作成功！");
                        } else {
                            toastr.error(result.extend.error);
                        }
                    }
                });
            }
        }
    });

    //收藏按钮
    $("#btn-star").click(function () {
        //判断用户是否登录
        if (checkLogin()) {
            var userId = $("#commentArea").attr("data-userId");
            var blogId = $("#blogArea").attr("data-blogId");
            if (userId.length == 16 && blogId.length == 16) {
                $.ajax({
                    url: '/starBlog/' + userId + "/" + blogId,
                    type: 'GET',
                    success: function (result) {
                        if (result.code === 100) {
                            toastr.success("操作成功！");
                        } else {
                            toastr.error(result.extend.error);
                        }
                    }
                });
            }
        }
    });

    //举报按钮
    $("#btn-report").click(function () {
        //判断登录
        if (checkLogin()) {
            //提示用户，确认该操作
            if (confirm("我们不主张盲目举报，该操作将被记录，是否继续？")) {
                var blogId = $("#blogArea").attr("data-blogId");
                if (blogId.length === 16) {
                    $.ajax({
                        url: '/report/blog/' + blogId,
                        type: 'GET',
                        success: function (result) {
                            if (result.code === 100) {
                                toastr.success("操作成功！");
                            } else {
                                toastr.error(result.extend.error);
                            }
                        }
                    });
                }
            }
            return false;
        }
    });

    //关注该用户
    $("#btn-follow").click(function () {
        var userId = $("#commentArea").attr("data-userId");
        var authorId = $("#authorArea").attr("data-authorId");
        $.ajax({
            url: '/followUser/' + userId + "/" + authorId,
            type: 'GET',
            success: function (result) {
                if (result.code === 100) {
                    //显示取消关注按钮
                    $("#btn-follow").hide();
                    $("#btn-cancel-follow").show();
                    toastr.success("操作成功！");
                } else {
                    toastr.error("操作失败！");
                }
            }
        });
    });

    //取消关注该用户
    $("#btn-cancel-follow").click(function () {
        var userId = $("#commentArea").attr("data-userId");
        var authorId = $("#authorArea").attr("data-authorId");
        $.ajax({
            url: '/cancelFollowUser/' + userId + "/" + authorId,
            type: 'GET',
            success: function (result) {
                if (result.code === 100) {
                    //显示取消关注按钮
                    $("#btn-cancel-follow").hide();
                    $("#btn-follow").show();
                    toastr.success("操作成功！");
                } else {
                    toastr.error("操作失败！");
                }
            }
        });
    });


</script>
</body>

</html>
